<template>
  <div>
    <h2>尺寸与边框</h2>
    <!-- <div class="w-1 bg-red-500">aaaa</div>
    <div class="w-2 bg-red-500">aaaa</div>
    <div class="w-3 bg-red-500">aaaa</div>
    <div class="w-96 bg-red-500">aaaa</div>
    <div class="w-[3px] bg-red-500">aaaa</div>
    <div class="w-1/2 bg-red-500">aaaa</div>
    <div class="w-1/12 bg-red-500">aaaa</div>
    <div class="w-full bg-red-500">aaaa</div>
    <br>
    <div class="w-64 h-64 bg-red-500"></div> -->
    <br>
    <!-- <div class="border border-red-500">bbbb</div>
    <ul class="divide-y-4">
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul> -->
    <br>
    <!-- <button class=" border outline-dashed outline-4 outline-offset-2">按钮</button> -->
     <button class="border ring-4">按钮</button>
  </div>
</template>

<script setup>

</script>

<style scoped>
</style>
